<template>
	<view class="order">
		<base-navbar back-color="#fff" :is-back="false" :is-menu="true">
			<template #default>
				<uni-segmented-control :style="'width:' + windowWidth + 'px'" :current="currentTab" :values="tabItems"
					:style-type="styleType" active-color="#fff" @clickItem="changeOrderStatus" />
			</template>
		</base-navbar>

		<view class="order-list" v-if="orderList.length > 0">
			<view class="order-item" v-for="(item,index) in orderList" :key="index">
				<view class="header" @click="pageRoute('/pages/order/order-detail/order-detail?id='+item.id)">
					<text class="NO">订单：{{item.order_sn}}</text>
					<text class="status" style="color: #f00000;"
						v-if="item.order_status == 0 && item.trade.pay_status == 0">待支付</text>
					<!-- <text class="status" style="color: #008300;"
								v-else-if="item.order_status == 1 && item.trade.pay_status == 1">待确认</text> -->
					<text class="status" style="color: #909399;"
						v-else-if="item.order_status == 2 && item.trade.pay_status == 1">待发货</text>
					<text class="status" style="color: #f00000;"
						v-else-if="item.order_status == 3 && item.trade.pay_status == 1">待收货</text>
					<text class="status" style="color: #909399;"
						v-else-if="item.order_status == 4 && item.trade.pay_status == 1">待评价</text>
					<text class="status" style="color: #008300;"
						v-else-if="item.order_status == 5 && item.trade.pay_status == 1">已完成</text>
					<text class="status" v-else-if="item.order_status == 6">已关闭</text>
					<text class="status" v-else-if="item.order_status == 7">无效订单</text>
					<!-- <text class="status" style="color: #f00000;"
								v-else-if="item.order_status == 8 && item.trade.pay_status == 2">申请退款</text>
							<text class="status" style="color: #008300;"
								v-else-if="item.order_status == 9 && item.trade.pay_status == 3">退款成功</text> -->
				</view>
				<view class="goods-item" v-for="(ite,indexd) in item.goodsList" :key="indexd"
					@click="pageRoute('/pages/order/order-detail/order-detail?id='+item.id)">
					<image class="thumb" :src="ite.logo" mode="aspectFill"></image>
					<view class="info">
						<view class="name">{{ite.name}}</view>
					</view>
					<view class="other">
						<text class="price">￥{{ite.sale_price}}</text>
						<text class="count">x{{ite.goods_num}}</text>
					</view>
				</view>
				<view class="sum-price">
					<text class="label">共{{item.goods_num}}件商品，合计</text>
					<text class="value">￥{{item.total_amount}}</text>
				</view>
				<!-- <view class="remark">
								<text class="label">买家备注：</text>
								<text class="value">颜色一样一件</text>
							</view> -->
				<view class="btn-group">
					<block v-if="item.order_status == 6 || item.order_status == 7">
						<c-button type="error" size="small" @click="deleteOrder(item.id)">删除订单
						</c-button>
					</block>
					<c-button size="small" v-if="item.order_status == 0 && item.trade.pay_status == 0"
						@click="cancelOrder(item.id)">取消订单</c-button>
					<c-button type="error" @click="pageRoute('/pages/order/pay/pay?trade_no=' + item.order_sn)"
						size="small" v-if="item.order_status == 0 && item.trade.pay_status == 0">去支付</c-button>
					<c-button size="small" @click="applyRefund(item.id)"
						v-if="item.order_status == 2 && item.trade.pay_status == 1">申请退款
					</c-button>
					<!-- <c-button type="success" size="small" v-if="item.order_status == 4 && item.trade.pay_status == 1"
								@click="pageRoute('/pages/service/evaluate/goods-evaluate?trade_no='+item.order_sn)">去评价</c-button> -->
					<c-button :style="{backgroundColor: themeColor.theme}" size="small"
						v-if="item.order_status == 4 && item.trade.pay_status == 1"
						@click="pageRoute('/pages/service/evaluate/evaluate-form?trade_no='+item.order_sn)">去评价</c-button>
				</view>
			</view>
		</view>
		<view v-else>
			<c-empty icon-name="order"></c-empty>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import checkLogin from '@/utils/login';
	import {
		ref,
		reactive,
		toRefs,
		inject,
		computed,
		onMounted,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		themeColor: JSON.parse(cache.get('themeColor')),
		tabItems: ['全部', '待付款', '待发货', '待收货', '待评价', '已完成'],
		styleType: 'text',
		windowWidth: '390',
		currentTab: 0, // 选中的 tabMaps 下标
		orderList: [],
		isMore: false,
	});

	onLoad((opt) => {
		if (opt.hasOwnProperty('currentTab')) {
			state.currentTab = parseInt(opt.currentTab);
		}
	});

	onShow(() => {
		//登录过期自动登录
		if (!checkLogin()) {
			pageRoute('/pages/users/login/login');
		} else {
			getOrderList();
		}
		console.log('主题色', state.colors)
	});

	onMounted(() => {
		// 获取当前系统的信息
		const sysInfo = uni.getSystemInfoSync();
		console.log("获取当前系统的信息", sysInfo);
		// 为 wh 窗口可用宽度动态赋值
		state.windowWidth = sysInfo.windowWidth;
		console.log("窗口可用宽度", state.windowWidth);
	});

	onPullDownRefresh((e) => {
		console.log("下拉刷新", e);
	});

	onReachBottom((e) => {
		console.log("上拉加载更多", e);
		if (state.isMore) {
			getOrderList();
		}
	});

	function getOrderList() {
		request.get('/order/list', {
			type: state.currentTab,
			skip: state.orderList.length,
			limit: 10,
		}).then(res => {
			console.log('订单列表', res);
			state.isMore = res.data.is_more;
			if (state.orderList.length == 0) {
				state.orderList = res.data.data;
			} else {
				state.orderList = state.orderList.concat(res.data.data);
			}
		})
	}

	function deleteOrder(id) {
		console.log('删除订单', id);
		request.get('/order/deleteOrder', {
			order_id: id,
		}).then(res => {
			uni.showToast({
				title: res.msg
			})
			setTimeout(function() {
				/* state.orderList = [];
				getOrderList(); */
				uni.reLaunch({
					url: '/pages/tabbar/order/order?currentTab=' + state.currentTab
				})
			}, 1000);
		})
	}

	function cancelOrder(id) {
		console.log('取消订单', id);
		request.get('/order/changeOrderStatus', {
			order_id: id,
			order_status: 6,
		}).then(res => {
			uni.showToast({
				title: res.msg
			})
			setTimeout(function() {
				/* state.orderList = [];
				getOrderList(); */
				uni.reLaunch({
					url: '/pages/tabbar/order/order?currentTab=' + state.currentTab
				})
			}, 1000);
		})
	}

	function applyRefund(id) {
		console.log('申请退款', id);
		request.get('/order/changeOrderStatus', {
			order_id: id,
			order_status: 8,
		}).then(res => {
			uni.showToast({
				title: res.msg
			})
			setTimeout(function() {
				/* state.orderList = [];
				getOrderList(); */
				uni.reLaunch({
					url: '/pages/tabbar/order/order?currentTab=' + state.currentTab
				})
			}, 1000);
		})
	}

	function changeOrderStatus(e) {
		console.log(e);
		// state.currentTab = e.index;
		state.currentTab = e.currentIndex;
		console.log("当前选中", state.currentTab);
		state.orderList = [];
		getOrderList();
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	};

	function pageTabRoute(url) {
		uni.switchTab({
			url
		});
	};

	const {
		themeColor,
		tabItems,
		styleType,
		windowWidth,
		currentTab,
		orderList,
		isMore,
	} = toRefs(state);
</script>

<style lang="scss">
	.order {
		.order-list {
			margin-top: $margin-24;

			.order-item {
				margin-bottom: $margin-24;
				background-color: $bg-inverse-color;

				.header {
					@include f-between;
					padding: $margin-24;

					.status {
						font-size: $font-24;
						color: $tips-color;
					}
				}

				.goods-item {
					@include f-between;
					padding: $margin-12 $margin-24;

					.thumb {
						width: 128rpx;
						height: 128rpx;
						background-color: $bg-color;
						border-radius: $radius-8;
					}

					.info {
						align-self: flex-start;
						flex: 1;
						margin: 0 $margin-24;

						.name {
							font-size: $font-30;
							color: $main-color;
							font-weight: 500;
						}
					}

					.other {
						display: flex;
						flex-direction: column;
						align-items: flex-end;

						.price {
							font-size: $font-32;
							color: $main-color;
							font-weight: bold;
						}

						.count {
							margin-top: $margin-12;
							color: $tips-color;
						}
					}
				}

				.sum-price {
					padding: $margin-12 $margin-24;
					text-align: right;

					.label {
						font-size: $font-24;
						color: $tips-color;
					}

					.value {
						color: $main-color;
						font-weight: bold;
						font-size: $font-32;
					}
				}

				.remark {
					margin-top: $margin-12;
					padding: 0 $margin-24;

					.label {
						color: $tips-color;
					}
				}

				.btn-group {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					padding: $margin-24;

					:deep(.c-button) {
						margin-left: $margin-20;
					}
				}
			}
		}
	}
</style>